<template>
  <div>
    <div class="flex">
      <h3 class="f-normal">推荐社区</h3>
    </div>
    <el-card
      v-for="community in communities"
      :key="community.id"
      :body-style="{ padding: '0' }"
      class="vertical-card-16">
      <router-link :to="`/communities/${community.id}`" class="padding block">
        <div class="title">{{ community.title }}</div>
        <p class="line2">{{ community.desc }}</p>
        <div class="info-deep">关联空间：{{ community.counts.spaces }}</div>
        <div class="info-deep">资源总数：{{ community.counts.docs }}</div>
        <div class="info-deep">问题总数：{{ community.counts.issues }}</div>
      </router-link>
    </el-card>
  </div>
</template>

<script>
import { formatCommunities } from '@/components/communities/format';

export default {
  name: 'recommend-communities', // 首页的推荐社区
  data() {
    return {
      communities: [],
      loading: false,
    };
  },
  created() { this.loadCommunities(); },
  methods: {
    loadCommunities() {
      this.loading = true;
      this.$api.communities.index()
        .then((res) => { this.communities = formatCommunities(res.data); })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style lang="scss">
.vertical-card-16+.vertical-card-16 { margin-top: 1rem; }
.vertical-card-16:hover .title { text-decoration: underline; }
</style>
